<template>
    <view class="container" :style="themeColor">
        <tab-bar :tabs="tabs" @clickTab="clickTab" :tabIndex="tabIndex" @timeFn="timeFn"></tab-bar>
        <view class="recode-num">
            <text>共{{ total }}条记录</text>
        </view>
        <view class="product-main-list" v-if="!isloadding" :style="{ height: listHeight }">
            <mescroll-uni
                @init="mescrollInit"
                :down="downOption"
                :height="listHeight"
                @down="refresh"
                :up="upOption"
                @up="getData">
                <!-- 数据列表 -->
                <recode-item v-for="(item, index) in datas" :key="index" :data="item"></recode-item>
            </mescroll-uni>
        </view>
    </view>
</template>

<script>
import { GetUserMoneyLogList } from "@/service/api/member.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import recodeItem from "@/pages_me/components/finance/recode-item.vue"
import tabBar from "@/pages_me/components/finance/tab-bar.vue"
export default {
    components: {
        tabBar,
        recodeItem,
    },
    data() {
        return {
            tabs: [
                {
                    title: "待审核",
                    state: "0",
                },
                {
                    title: "已通过",
                    state: "1",
                },
                {
                    title: "已驳回",
                    state: "2",
                },
            ],
            total: "",
            downOption: {
                auto: false,
            },
            upOption: {
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    size: 10, // 每页数据的数量
                    time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
                },
                textLoading: "加载中 ...", // 加载中的提示文本
                textNoMore: "-- 没有更多了 --", // 没有更多数据的提示文本
                empty: {
                    icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                    tip: "~ 暂无数据 ~", // 空提示
                },
                toTop: {
                    src: false,
                },
            },
            isloadding: false,
            datas: [],
            tabIndex: 0, // 当前tab的下标
            requestData: {
                state: 0,
                pageIndex: 1,
                moneyType: 2,
                payType: 0,
                logTypes: "1,6,19",
                startTime: "",
                endTime: "",
            },
            listHeight: 0,
        }
    },
    mounted() {
        this.getListHeight()
        //#ifndef MP
        this.refresh()
        //#endif
    },
    methods: {
        getData(page) {
            let param = this.requestData
            param.pageSize = page.size
            param.pageIndex = page.num
            GetUserMoneyLogList(param).then((res) => {
                this.total = res.RecordAmout
                this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                this.datas = this.datas.concat(res.Data)
            })
        },
        getListHeight(element) {
            getElementHeight(this, ".product-main-list", (e) => {
                //再获取列表高度
                this.listHeight = e + "px"
            })
        },
        //标签切换
        clickTab(index) {
            this.requestData.state = index
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
            this.refresh()
        },
        //时间选择
        timeFn(start, end) {
            this.requestData.startTime = start
            this.requestData.endTime = end
            this.refresh()
        },
        refresh(requestData) {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss">
.container {
    padding: $app-page-padding;
}

.recode-num {
    margin-bottom: 20rpx;

    text {
        color: $app-color-text-tip;
    }
}
</style>
